import React,{Component} from 'react'
import store from './redux/store.js'

class App extends Component{
	increment=()=>{
		const {value}=this.num;
		store.dispatch({type:'increment',data:value})
	}
	decrement=()=>{
		const {value}=this.num;
		store.dispatch({type:'decrement',data:value})
	}
	oddincrement=()=>{
		const num=store.getState();
		const {value}=this.num;
		if(num%2!==0){
			store.dispatch({type:'increment',data:value})
		}
	}
	asyncincrement=()=>{
		const {value}=this.num;
		setTimeout(store.dispatch({type:'increment',data:value}),500)
	}
	render(){
		return (
			<div className="container">
				<h3 className='display-4'>Redux Application</h3>
				<p>当前求和为{store.getState()}</p>
				<select className='form-control' ref={(num)=>this.num=num}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>
				<div className='mt-3'>
					<button onClick={this.increment} className='btn btn-primary mr-3'>加+1</button>
					<button onClick={this.decrement} className='btn btn-info mr-3'>减-1</button>
					<button onClick={this.oddincrement} className='btn btn-warning mr-3'>奇数+</button>
					<button onClick={this.asyncincrement} className='btn btn-danger mr-3'>异步+</button>
				</div>
			</div>
		)
	}
}

export default App